<template>
    <div>
        <a-modal v-model:visible="modalVisible" title="修改实例名称" @ok="handleOk" :confirm-loading="confirmLoading">
            <div>
                <a-form :model="form">
                    <a-form-item label="实例名称">
                        <a-input style="width:180px;" placeholder="请输入名称" :maxlength="20" v-model:value="form.name" />
                    </a-form-item>
                </a-form>
            </div>
        </a-modal>
    </div>
</template>

<script setup>
import { defineProps, defineEmits, computed, ref } from 'vue';
import { updateInstance } from 'api/modules/api.instance'

const props = defineProps({
    modelValue: {
        type: Boolean,
    },
    instance: {
        type: Object,
        default: {}
    }
});

const form = ref({
    name: props.instance?.Instance?.name,
})

const emit = defineEmits(['update:modelValue', 'handelOpt']);
const modalVisible = computed({
    get: () => props.modelValue,
    set: v => emit('update:modelValue', v),
});
// 确定按钮的回调
const confirmLoading = ref(false)
const handleOk = () => {
    const params = {
        id: props.instance?.Instance?.id,
        ...form.value
    }
    confirmLoading.value = true
    updateInstance(params).then(res => {
        confirmLoading.value = false
        if (res.code == 0) {
            emit('update:modelValue', false)
            emit('handelOpt', props.instance?.Instance?.instanceId)
        }
    }).catch(() => {
        confirmLoading.value = false
    })
};

</script>